<template>
  <div>
    <div v-for="c in clist">
      <!-- query传参,方式一 字符串  /hc?name=html&price=666`-->
      <!-- <router-link :to="`/hc?name=${c.name}&price=${c.price}`" :key="c.id">{{c.name}}</router-link> -->
      <!-- query传参,方式二 对象 -->
      <!-- <router-link :to="{path:'/hc',query:{name:c.name,price:c.price}}" :key="c.id">{{c.name}}</router-link> -->

    <!-- <router-link :to="/hc?name=HTML&price=666">HTML</router-link> | -->
    <!-- <router-link to="/hc">CSS</router-link> -->

    <!-- params传参,方式一 字符串 /hc/html/666 -->
    <!-- <router-link :to="`/hc/${c.name}/${c.price}`" :key="c.id">{{c.name}}</router-link> -->
    <!-- params传参,方式二 对象 -->
    <router-link :to="{
                         //path:'/hc', 此处不能使用path
                         name:'hc', //使用name,值是路由规则名称
                         params:{
                           name:c.name,
                           price:c.price
                         }
                      }" :key="c.id">{{c.name}}</router-link>
    </div>
    <h1>课程页面</h1>
    <router-view></router-view>

    <!--
       restful风格:
       http://localhost:8080/1/b  获取  GET
       http://localhost:8080/2/w  添加  POST
       http://localhost:8080/3/f  删除  DELETE
       http://localhost:8080/4/9  修改  PUT


       http://localhost:8080/get?id=1$b  获取
       http://localhost:8080/add?id=2&w  添加
       http://localhost:8080/del?id=3&f  删除
       http://localhost:8080/mf?id=4&9  修改
    -->
  </div>
</template>

<script>
  export default {
    name: 'Course',
    data() {
      return {
        clist: [{
          id: 1,
          name: 'HTML',
          price: 666
        }, {
          id: 2,
          name: 'CSS',
          price: 999
        }]
      }
    }
  }
</script>

<style>
</style>
